<template>
  <div id="components-layout-demo-basic" style="width: 100%; height: 100%; position: relative">
    <!-- <img src="~@/assets/menu_bg.jpg" style="width: 100%; height: 100%; position: absolute; opacity: 0.3" /> -->
    <a-layout>
      <a-layout-content style="margin-top: 20px:background:transparent">
        <a-form-model
          id="frmMatchQuery"
          :layout="'inline'"
          :model="queryModel"
          ref="frmMatchQuery"
          style="margin: 25px 15px"
        >
          <a-form-model-item label="赛事名称">
            <!-- <a-input placeholder="请输入赛事名称" v-model="queryModel.name" /> -->
            <a-select
              show-search
              placeholder="请输入或选择赛事名称"
              style="width: 200px"
              :filter-option="filterOption"
              :options="matchList"
              :field-names="{ label: 'label', value: 'id' }"
              v-model="queryModel.matchId"
              @select="onMatchSelect"
            >
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item label="姓名">
            <a-input placeholder="请输入姓名" v-model="queryModel.name" />
          </a-form-model-item> -->
          <a-form-model-item label="组别">
            <!-- <a-input placeholder="请输入组别" v-model="queryModel.group" /> -->
            <a-select
              show-search
              placeholder="请输入或选择组别"
              style="width: 200px"
              :filter-option="filterOption"
              :options="groupList"
              :field-names="{ label: 'label', value: 'value' }"
              :defaultValue="''"
              v-model="queryModel.groupId"
            >
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item label="参赛编号" v-show="moreQueryConditionShow == true">
            <a-input placeholder="请输入参赛编号" v-model="queryModel.pcode" />
          </a-form-model-item>
          <a-form-model-item label="总成绩" v-show="moreQueryConditionShow == true">
            <a-input placeholder="请输入总成绩" v-model="queryModel.score" />
          </a-form-model-item> -->
          <!-- <a-form-model-item label="是否检录" style="" v-show="moreQueryConditionShow == true">
            <a-select v-model="queryModel.iscall" placeholder="是否检录">
              <a-select-option value="">不填</a-select-option>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-form-model-item> -->
          <!-- <a class="switchQuery" @click="switchMore()" v-show="moreQueryCondition == false"
            ><a-icon type="down" />展开</a
          >
          <a class="switchQuery" @click="switchMore()" v-show="moreQueryCondition == true"><a-icon type="up" />收起</a> -->
          <a-form-model-item>
            <a-button type="primary" @click="onSubmit"><a-icon type="search" />查询</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="resetForm"><a-icon type="reload" />重置</a-button>
          </a-form-model-item>
        </a-form-model>

        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :pagination="false"
          :scroll="{ x: 1600, y: tableHeight }"
        >
        </a-table>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import store from '@/store/'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

export default {
  name: 'QueryPlayers',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
  },
  data() {
    return {
      tableHeight: 600,
      matchId: '',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      emptyModel: { matchId: '', groupId: '' },
      queryModel: { matchId: '', groupId: '' },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      moreQueryCondition: false,
      moreQueryConditionShow: false,
      data: [],
      data_origin: [],
      groupList: [],
      groupList_origin: [],
      matchList: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'player',
          sorter: (a, b) => a.player.localeCompare(b.player),
          sortDirections: ['descend', 'ascend'],
          width: '12%',
        },
        {
          title: '组别',
          dataIndex: 'groupid',
          sorter: (a, b) => a.groupid.localeCompare(b.groupid),
          sortDirections: ['descend', 'ascend'],
          width: '5%',
          align: 'center',
        },
        {
          title: '芯片号',
          dataIndex: 'ringcode',
          sorter: (a, b) => a.ringcode.localeCompare(b.ringcode),
          sortDirections: ['descend', 'ascend'],
          dictCode: '',
          width: '14%',
          align: 'center',
        },
        {
          title: '参赛编号',
          dataIndex: 'pcode',
          sorter: (a, b) => a.pcode.localeCompare(b.pcode),
          sortDirections: ['descend', 'ascend'],
          width: '8%',
          align: 'center',
        },
        {
          title: '开始时间',
          dataIndex: 'pstarttime',
          sorter: (a, b) => a.pstarttime.localeCompare(b.pstarttime),
          sortDirections: ['descend', 'ascend'],
          width: '10%',
          align: 'center',
        },
        {
          title: '总圈数',
          dataIndex: 'totalring',
          sorter: (a, b) => a.totalring.localeCompare(b.totalring),
          sortDirections: ['descend', 'ascend'],
          width: '6%',
          align: 'center',
        },
        {
          title: '总成绩',
          dataIndex: 'score',
          sorter: (a, b) => a.score.localeCompare(b.score),
          sortDirections: ['descend', 'ascend'],
          width: '6%',
          align: 'center',
        },
        {
          title: '净成绩',
          dataIndex: 'scorecj',
          sorter: (a, b) => a.scorecj.localeCompare(b.scorecj),
          sortDirections: ['descend', 'ascend'],
          width: '6%',
          align: 'center',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          // sorter: (a, b) => a.phone.localeCompare(b.phone),
          // sortDirections: ['descend', 'ascend'],
          width: '12%',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'idcard',
          // sorter: (a, b) => a.idcard.localeCompare(b.idcard),
          // sortDirections: ['descend', 'ascend'],
          width: '12%',
          align: 'center',
        },
        {
          title: '团队',
          dataIndex: 'teams',
          // sorter: (a, b) => a.teams.localeCompare(b.teams),
          // sortDirections: ['descend', 'ascend'],
        },
        // {
        //   title: '是否检录',
        //   dataIndex: 'iscall',
        //   sorter: (a, b) => a.iscall.localeCompare(b.iscall),
        //   sortDirections: ['descend', 'ascend'],
        //   width: '5%',
        //   // placeholder: '请输入${title}',
        //   // defaultValue: '',
        // },
        // {
        //   title: '操作',
        //   key: 'operation',
        //   fixed: 'right',
        //   width: 100,
        //   scopedSlots: { customRender: 'operation' },
        // },
      ],
      PlayerModel: {},
    }
  },
  created() {},
  mounted() {
    let height_form = this.$refs.frmMatchQuery.$el.clientHeight
    let window_height = window.innerHeight
    this.tableHeight = window_height * (1 - (height_form + 50) / window_height - 0.18)

    let that = this
    window.onresize = function () {
      let height_form = that.$refs.frmMatchQuery.$el.clientHeight
      let window_height = window.innerHeight
      that.tableHeight = window_height * (1 - (height_form + 50) / window_height - 0.18)
    }
    this.$http.get('/matchwhite/matchinfo').then((res) => {
      if (res.code == 200 && res.success) {
        that.matchList = res.result.match.map((o) => {
          return { label: o.mname, value: o.id }
        })

        that.groupList_origin = res.result.info
      }
    })
    // this.$http.get('/matchplayer/list?matchId=' + this.matchId).then((res) => {
    //   this.data = res.result
    //   if (this.data.length > 0) {
    //     this.data.forEach((item, index) => {
    //       item['key'] = index;
    //     })
    //     let groupList = this.data.map((o) => o.groupid)
    //     groupList = [...new Set(groupList)]
    //     this.groupList = groupList.map((o) => {
    //       return { label: o, value: o }
    //     });
    //   }
    //   this.data_origin = this.data
    //   //console.log('赛事人员列表', this.data)
    //   this.initWebSocket()
    // })
  },
  methods: {
    switchMore() {
      if (this.moreQueryCondition === true) {
        this.moreQueryCondition = false
        this.moreQueryConditionShow = false
      } else {
        this.moreQueryCondition = true
        this.moreQueryConditionShow = true
      }
    },
    onSubmit(e) {
      // this.data = JSON.parse(JSON.stringify(this.data_origin))
      // let queryFilterModel = this.$refs.frmMatchQuery.model
      // if (queryFilterModel.matchId) {
      //   this.data = this.data.filter((x) => x.matchId.indexOf(queryFilterModel.matchId) >= 0)
      // }
      // if (queryFilterModel.group) {
      //   this.data = this.data.filter((x) => x.groupid.toUpperCase().indexOf(queryFilterModel.group.toUpperCase()) >= 0)
      // }
      let queryFilterModel = this.$refs.frmMatchQuery.model
      let queryCondition = []
      if (queryFilterModel.matchId) {
        queryCondition.push('matchId=' + queryFilterModel.matchId);
      }
      if(queryFilterModel.groupId){
        queryCondition.push('groupId=' + queryFilterModel.groupId)
      }
      let queryString = queryCondition.join('&');
      if(queryString){
        queryString = "?" + queryString
      }
     
      this.$http.get('/matchwhite/players' + queryString).then((res) => {
        this.data = res.result;
         debugger;
        if (this.data.length > 0) {
          this.data.forEach((item, index) => {
            item['key'] = index
          })
        }
      })
    },
    resetForm() {
      this.$refs.frmMatchQuery.resetFields()
      this.$refs.frmMatchQuery.model.matchId = ''
      this.$refs.frmMatchQuery.model.groupId = ''
      this.data = []
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onMatchSelect(value) {
      this.groupList = []
      this.$refs.frmMatchQuery.model.groupId = ''
      let that = this
      this.groupList_origin.forEach((item) => {
        if (item.length > 0) {
          if (item[0].matchid === value) {
            that.groupList = item.map((o) => {
              return { label: o.mgroup, value: o.mgroup }
            })
          }
        }
      })
    },
    // initWebSocket: function () {
    //   // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    //   var userId = store.getters.userInfo.id
    //   var url = window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + 'mqtt/' + userId
    //   //console.log(url);
    //   //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
    //   let token = Vue.ls.get(ACCESS_TOKEN)
    //   this.websock = new WebSocket(url, [token])
    //   console.log('url', url)
    //   console.log('userId', userId)
    //   console.log('token', token)
    //   //update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
    //   this.websock.onopen = this.websocketOnopen
    //   this.websock.onerror = this.websocketOnerror
    //   this.websock.onmessage = this.websocketOnmessage
    //   this.websock.onclose = this.websocketOnclose
    // },
    // websocketOnopen: function () {
    //   console.log('Mqtt连接成功')
    // },
    // websocketOnerror: function (e) {
    //   console.log('WebSocket连接发生错误，第%s次', this.wsConnectErrorTime)

    //   this.wsConnectErrorTime = this.wsConnectErrorTime + 1
    //   if (this.wsConnectErrorTime > 5) {
    //     console.log('WebSocket连接错误超过5次，就不再重新连了！')
    //     this.lockReconnect = true
    //     return
    //   }

    //   this.reconnect()
    // },
    // websocketOnmessage: function (e) {
    //   var data = eval('(' + e.data + ')') //解析对象
    //   console.log('-----接收消息-------', data)
    //   if (data.success) {
    //     this.model = data.result
    //   }
    //   //心跳检测重置
    //   //this.heartCheck.reset().start();
    // },
    // websocketOnclose: function (e) {
    //   if (this.websock != null) {
    //     this.websock.close()
    //     console.log('connection closed (' + e + ')')
    //     if (e) {
    //       console.log('connection closed (' + e.code + ')')
    //     }
    //     //this.reconnect();
    //   }
    // },
    // websocketSend(text) {
    //   // 数据发送
    //   try {
    //     this.websock.send(text)
    //   } catch (err) {
    //     console.log('send failed (' + err.code + ')')
    //   }
    // },
    // reconnect() {
    //   var that = this
    //   if (that.lockReconnect) return
    //   that.lockReconnect = true
    //   //没连接上会一直重连，设置延迟避免请求过多
    //   setTimeout(function () {
    //     console.info('尝试重连...')
    //     that.initWebSocket()
    //     that.lockReconnect = false
    //   }, 20000)
    // },
  },
}
</script>

<style lang="less" scoped>
// /deep/ .ant-layout,
// /deep/ .ant-table-body,
// /deep/ .ant-table-header ,
// /deep/ .ant-table-thead > tr > th,
// /deep/ .ant-table-tbody > tr > td {
//   background-color: transparent !important;
// }

#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: transparent;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-content {
  /* background: rgba(16, 142, 233, 1); */
  color: #fff;
  min-height: 120px;
  line-height: 120px;
  margin: 20px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}

.btn_inline {
  display: inline;
}
.switchQuery {
  display: inline-block;
  vertical-align: bottom;
  padding: 10px;
  margin-right: 10px;
}
</style>